<template>
  <div class="home">
    <Layout :style="{minHeight: '100vh'}">
      <Header>
        <h4 class="header-title">Django2.1 & Django REST Framework & Vue</h4>
      </Header>
      <Layout>
        <Content :style="{background: '#fff'}">
            <Layout>
              <Sider hide-trigger :style="{background: '#fff'}">
                <div v-for="item in category" :key="item.code" class="firstItem">
                  <Divider orientation="left">{{item.name}}</Divider>
                  <div v-for="secondItem in item.seb_cat" :key="secondItem.code" class="secondItem">
                    {{secondItem.name}}
                    <div v-for="thirdItem in secondItem.seb_cat" :key="thirdItem.code" class="thirdItem">
                      {{thirdItem.name}}
                    </div>
                  </div>
                </div>
              </Sider>
              <Content :style="{padding: '24px', minHeight: '280px', background: '#eee'}">
                <Row :gutter="12" style="margin-bottom: 20px;">
                  <!-- 用户登录 begin -->
                  <i-col span="8">
                    <Card :bordered="false">
                      <p slot="title">用户登录</p>
                      <div>
                        <i-input type="text" v-model="username" placeholder="用户名/手机号">
                          <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </i-input>
                        <i-input type="password" v-model="password" placeholder="密码" style="margin: 20px 0;">
                          <Icon type="ios-lock-outline" slot="prepend"></Icon>
                        </i-input>
                        <Button type="primary" @click="login">立即登录</Button>
                      </div>
                    </Card>
                  </i-col>
                  <!-- 用户登录 end -->
                  <!-- 用户手机注册 begin -->
                  <i-col span="8">
                    <Card :bordered="false">
                      <p slot="title">用户手机注册</p>
                      <div>
                        <i-input type="text" v-model="username" placeholder="手机号">
                          <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </i-input>
                        <i-input search enter-button="获取验证码" placeholder="短信验证码" style="margin: 20px 0;"/>
                        <i-input type="password" v-model="password" placeholder="密码" style="margin-bottom: 20px;">
                          <Icon type="ios-lock-outline" slot="prepend"></Icon>
                        </i-input>
                        <Button type="primary" @click="login">立即注册</Button>
                      </div>
                    </Card>
                  </i-col>
                  <!-- 用户手机注册 end -->
                  <!-- 获取用户信息 begin -->
                  <i-col span="8">
                    <Card :bordered="false">
                      <p slot="title">获取用户信息</p>
                      <div>
                        <p>birthday: {{userInfo.birthday}}</p>
                        <p>email: {{userInfo.email}}</p>
                        <p>gender: {{userInfo.gender}}</p>
                        <p>mobile: {{userInfo.mobile}}</p>
                        <p>name: {{userInfo.name}}</p>
                        <p>username: {{userInfo.username}}</p>
                        <p>token: {{userInfo.token}}</p>
                        <Button type="primary" @click="getUserInfo">获取用户信息</Button>
                      </div>
                    </Card>
                  </i-col>
                  <!-- 获取用户信息 end -->
                </Row>
                <Row :gutter="12" style="margin-bottom: 20px;">
                  <!-- 用户更新个人信息 begin -->
                  <i-col span="8">
                    <Card :bordered="false">
                      <p slot="title">获取用户信息</p>
                      <div>
                        <div><span>用户名：</span><i-input v-model="formUsername" placeholder="Enter something..." disabled/></div>
                        <div><span>email：</span><i-input v-model="formEmail" placeholder="Enter something..." /></div>
                        <div><span>gender：</span><i-input v-model="formGender" placeholder="Enter something..." /></div>
                        <div><span>mobile：</span><i-input v-model="formMobile" placeholder="Enter something..." disabled/></div>
                        <div><span>name：</span><i-input v-model="formName" placeholder="Enter something..." /></div>
                        <div><span>birthday：</span><i-input v-model="formBirthday" placeholder="Enter something..." /></div>
                        <Button type="primary" @click="updateUserInfo" style="margin-top: 10px;">更新个人信息</Button>
                      </div>
                    </Card>
                  </i-col>
                  <!-- 用户更新个人信息 end -->
                  <!-- 用户收藏商品 begin -->
                  <i-col span="8">
                    <Card :bordered="false">
                      <p slot="title">用户收藏商品</p>
                      <div>
                        <div v-for="item in userFavList" :key="item.id">记录ID:{{item.id}}，商品ID:{{item.goods}}</div>
                        <Button type="primary" @click="getUserFavList" style="margin-top: 10px;">获取收藏列表</Button>
                        <div style="margin-top: 10px;"><span>商品ID：</span><i-input v-model="userFavId" placeholder="请输入商品ID" /></div>
                        <Button type="primary" @click="getUserFavInfo" style="margin-top: 10px;">获取收藏详情</Button>
                        <div style="margin-top: 10px;"><span>商品ID：</span><i-input v-model="userFavId" placeholder="请输入商品ID" /></div>
                        <Button type="primary" @click="postUserFav" style="margin-top: 10px;">添加收藏/取消收藏商品</Button>
                      </div>
                    </Card>
                  </i-col>
                  <!-- 用户收藏商品 end -->
                  <!-- 收货地址 begin -->
                  <i-col span="8">
                    <Card :bordered="false">
                      <p slot="title">收货地址</p>
                      <div>
                        <Button type="primary" @click="getLeavingMessage" style="margin-top: 10px;">收货地址</Button>
                      </div>
                    </Card>
                  </i-col>
                  <!-- 收货地址 end -->
                </Row>
                <Row :gutter="12">
                  <!-- 购物车 begin -->
                  <i-col span="8">
                    <Card :bordered="false">
                      <p slot="title">购物车</p>
                      <div>
                        <div v-for="item in shopCartList" :key="item.id">数量:{{item.nums}}，商品ID:{{item.goods.id}}，时间:{{item.add_time}}</div>
                        <div><span>商品ID：</span><i-input v-model="shopCartGoodsId" placeholder="Enter something..."/></div>
                        <div><span>商品数量：</span><i-input v-model="shopCartNums" placeholder="Enter something..." /></div>
                        <div style="display: flex; justify-content: space-between;">
                          <Button type="primary" @click="postShoppingCart" style="margin-top: 10px;">添加购物车</Button>
                          <Button type="warning" @click="getShoppingCartModify" style="margin-top: 10px;">修改购物车</Button>
                          <Button type="error" @click="getShoppingCartDelete" style="margin-top: 10px;">移除购物车</Button>
                        </div>
                        <div style="margin-top: 18px;"><span>联系电话：</span><i-input v-model="singerMobile" placeholder="Enter something..." /></div>
                        <div>
                          <Button type="success" @click="submitOrder" style="margin-top: 10px; width: 100%;">提交订单</Button>
                        </div>
                      </div>
                    </Card>
                  </i-col>
                  <!-- 购物车 end -->
                </Row>
              </Content>
            </Layout>
          </Content>
      </Layout>
      <Footer class="layout-footer-center">2019 &copy; Actoress</Footer>
    </Layout>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      category: 'Hello iView',
      username: 'Actoress',
      password: 'wjw1996321..',
      token: '',
      userInfo: {},
      formBirthday: '',
      formEmail: '',
      formGender: '',
      formMobile: '',
      formName: '',
      formUsername: '',
      userFavList: [],
      userFavId: '',
      shopCartList: [],
      shopCartGoodsId: '',
      shopCartNums: '',
      singerMobile: '13799100995',
      host: '/api'
    }
  },
  methods: {
    // 获取分类
    async getCategory () {
      let res = await this.axios.get(`${this.host}/category/`, {
        params: {}
      })
      this.category = res.data
    },
    async getUserInfo () {
      let res = await this.axios.get(`${this.host}/user_info`, {
        params: {
          token: this.token
        },
        headers: { 'Authorization': `JWT ${this.token}` }
      })
      this.userInfo = res.data
      this.formBirthday = this.userInfo.birthday
      this.formEmail = this.userInfo.email
      this.formGender = this.userInfo.gender
      this.formMobile = this.userInfo.mobile
      this.formName = this.userInfo.name
      this.formUsername = this.userInfo.username
    },
    // 获取用户信息
    async updateUserInfo () {
      let res = await this.axios.post(`${this.host}/user_info_modify`, {
        email: this.formEmail,
        birthday: this.formBirthday,
        gender: this.formGender,
        name: this.formName
      }, {
        headers: { 'Authorization': `JWT ${this.token}` }
      })
      this.$Message.success('更新成功')
      // console.log(res)
    },
    // 用户登录
    async login () {
      let res = await this.axios.post(`${this.host}/login/`, {
        username: this.username,
        password: this.password
      })
      this.token = res.data.token
      this.$Message.success('登录成功')
      this.getUserInfo()
      this.getUserFavList()
      this.getShoppingCart()
      this.getOrderList()
      this.getOrderDetail()
    },
    // 获取收藏列表
    async getUserFavList () {
      let res = await this.axios.get(`${this.host}/user_fav`, {
        params: {},
        headers: { 'Authorization': `JWT ${this.token}` }
      })
      this.userFavList = res.data
      // console.log(this.userFavList)
    },
    // 获取收藏详情
    async getUserFavInfo () {
      let res = await this.axios.get(`${this.host}/user_fav/${this.userFavId}`, {
        params: {
          goods_id: this.userFavId
        },
        headers: { 'Authorization': `JWT ${this.token}` }
      })
      // console.log(res)
    },
    // 获取收藏详情
    async getLeavingMessage () {
      let res = await this.axios.get(`${this.host}/leaving_message`, {
        params: {},
        headers: { 'Authorization': `JWT ${this.token}` }
      })
      // console.log(res)
    },
    // 用户登录
    async postUserFav () {
      let res = await this.axios.post(`${this.host}/user_fav/${this.userFavId}`, {
        goods: this.userFavId
      }, {
        headers: { 'Authorization': `JWT ${this.token}` }
      })
      if (res.status === 201) {
        this.$Message.success('收藏成功')
      } else if (res.status === 204) {
        this.$Message.success('取消收藏成功')
      }
      this.getUserFavList()
    },
    // 获取购物车
    async getShoppingCart () {
      let res = await this.axios.get(`${this.host}/shopping_cart`, {
        params: {},
        headers: { 'Authorization': `JWT ${this.token}` }
      })
      this.shopCartList = res.data
      // console.log(res)
    },
    // 添加购物车
    async postShoppingCart () {
      let res = await this.axios.post('${this.host}/shopping_cart', {
        goods: this.shopCartGoodsId,
        nums: this.shopCartNums
      }, {
        headers: { 'Authorization': `JWT ${this.token}` }
      })
      this.getShoppingCart()
    },
    async getShoppingCartModify () {
      let res = await this.axios.post(`${this.host}/shopping_cart_modify/${this.shopCartGoodsId}`, {
        goods: this.shopCartGoodsId,
        nums: this.shopCartNums
      }, {
        headers: { 'Authorization': `JWT ${this.token}` }
      })
      this.getShoppingCart()
    },
    async getShoppingCartDelete () {
      let res = await this.axios.post(`${this.host}/shopping_cart_delete/${this.shopCartGoodsId}`, {
        goods: this.shopCartGoodsId,
        nums: this.shopCartNums
      }, {
        headers: { 'Authorization': `JWT ${this.token}` }
      })
      this.getShoppingCart()
    },
    async submitOrder () {
      let res = await this.axios.post(`${this.host}/order_create`, {
        singer_mobile: this.singerMobile
      }, {
        headers: { 'Authorization': `JWT ${this.token}` }
      })
      this.$Message.success('下单成功')
      this.getShoppingCart()
    },
    async getOrderList () {
      let res = await this.axios.get(`${this.host}/order_list`, {
        params: {},
        headers: { 'Authorization': `JWT ${this.token}` }
      })
      console.log(res)
    },
    async getOrderDetail () {
      let res = await this.axios.get(`${this.host}/order_detail/${5}`, {
        params: {},
        headers: { 'Authorization': `JWT ${this.token}` }
      })
      console.log(res)
    }
  },
  mounted () {
    this.getCategory()
  }
}
</script>

<style scoped>
.firstItem {
  margin-bottom: 20px;
}
.secondItem {
  padding-left: 20px;
  margin-bottom: 20px;
}
.thirdItem {
  padding-left: 20px;
}
.header-title {
  font-size: 14px;
  color: #ffffff;
  
}
</style>
